<template>
  <view class="repair-task-container">
    <!-- 头部及筛选区域（蓝色背景，占1/3屏幕） -->
    <view class="top-section">
      <!-- 头部区域 -->
      <view class="header">
        <image class="back-icon" src="/static/back.png" mode="widthFix" alt="返回" @click="handleBack" />
        <text class="title">维修任务</text>
        <view class="header-icons">
          <image class="more-icon" src="/static/more.png" mode="widthFix" alt="更多" />
          <image class="scan-icon" src="/static/scan.png" mode="widthFix" alt="扫一扫" />
        </view>
      </view>

      <!-- 搜索区域 -->
      <view class="search-area">
        <input 
          class="search-input" 
          type="text" 
          placeholder="输入需要搜索的内容" 
          v-model="searchValue"
        />
        <image class="search-icon" src="/static/search.png" mode="widthFix" alt="搜索" />
      </view>

      <!-- 筛选区域 -->
      <view class="filter-area">
        <text class="total-text">共3条</text>
        <view class="filter-item">
          <text class="filter-label">状态</text>
          <picker class="filter-picker" mode="selector" :range="statusOptions" @change="handleStatusChange">
            <view class="filter-picker-text">{{ selectedStatus }}</view>
          </picker>
        </view>
        <view class="filter-item">
          <text class="filter-label">维修方式</text>
          <picker class="filter-picker" mode="selector" :range="repairWayOptions" @change="handleRepairWayChange">
            <view class="filter-picker-text">{{ selectedRepairWay }}</view>
          </picker>
        </view>
        <view class="filter-item date-item">
          <!-- 日期图片在文字左边，且在同一行 -->
          <view class="date-label-container">
            <image class="time-icon" src="/static/time.png" mode="widthFix" alt="时间" />
            <text class="filter-label">日期</text>
          </view>
          <!-- 日期时间选择器 -->
          <uni-datetime-picker 
            type="date" 
            v-model="selectedDate" 
            @change="handleDateChange"
          />
        </view>
      </view>
    </view>

    <!-- 维修任务列表（白色背景，下方区域） -->
    <view class="task-list">
      <!-- 循环渲染任务列表 -->
      <view 
        class="task-item" 
        v-for="(task, index) in filteredTaskList" 
        :key="`task-${task.sn}`"
      >
        <view class="task-top">
          <text class="task-sn">维修单号: {{ task.sn }}</text>
          <text class="task-status" :class="{ 
            'status-processing': task.status === '进行中', 
            'status-completed': task.status === '已完成' 
          }">
            {{ task.status }}
          </text>
        </view>
        <view class="task-info">
          <text class="task-way">维修方式: {{ task.way }}</text>
          <text class="task-time">预约日期: {{ task.time }}</text>
          <button class="detail-btn" @click="handleDetail(task)">查看详情</button>
        </view>
      </view>
      
      <!-- 空状态提示 -->
      <view class="empty-state" v-if="filteredTaskList.length === 0">
        <text>暂无符合条件的维修任务</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 搜索值
      searchValue: '',
      
      // 筛选选项 - 确保数组正确初始化
      statusOptions: ['全部', '进行中', '已完成'],
      repairWayOptions: ['全部', '到店维修', '上门取车'],
      
      // 选中的筛选值
      selectedStatus: '全部',
      selectedRepairWay: '全部',
      selectedDate: '', // 选中的日期
      
      // 原始维修任务数据 - 确保数据结构正确
      taskList: [
        {
          sn: 'RX20230318001',
          status: '进行中',
          way: '到店维修',
          time: '2023-03-18 11:00'
        },
        {
          sn: 'RX20230318002',
          status: '已完成',
          way: '上门取车',
          time: '2023-03-18 09:30'
        },
        {
          sn: 'RX20230317001',
          status: '进行中',
          way: '上门取车',
          time: '2023-03-17 15:45'
        }
      ]
    }
  },
  
  computed: {
    // 筛选逻辑 - 确保初始状态能显示所有数据
    filteredTaskList() {
      // 强制初始状态显示所有数据
      if (this.selectedStatus === '全部' && 
          this.selectedRepairWay === '全部' && 
          !this.searchValue && !this.selectedDate) {
        return this.taskList;
      }
      
      return this.taskList.filter(task => {
        // 状态筛选
        if (this.selectedStatus !== '全部' && task.status !== this.selectedStatus) {
          return false;
        }
        
        // 维修方式筛选
        if (this.selectedRepairWay !== '全部' && task.way !== this.selectedRepairWay) {
          return false;
        }
        
        // 日期筛选
        if (this.selectedDate) {
          const taskDate = task.time.split(' ')[0]; // 提取任务日期部分
          if (taskDate !== this.selectedDate) {
            return false;
          }
        }

        // 搜索筛选
        if (this.searchValue && 
            !task.sn.includes(this.searchValue) && 
            !task.way.includes(this.searchValue) &&
            !task.time.includes(this.searchValue)) {
          return false;
        }
        
        return true;
      });
    }
  },
  
  methods: {
    // 筛选事件处理 - 确保参数正确解析
    handleStatusChange(e) {
      if (e.detail && typeof e.detail.value === 'number') {
        this.selectedStatus = this.statusOptions[e.detail.value] || '全部';
      }
    },

    handleRepairWayChange(e) {
      if (e.detail && typeof e.detail.value === 'number') {
        this.selectedRepairWay = this.repairWayOptions[e.detail.value] || '全部';
      }
    },

    // 日期选择器变化处理
    handleDateChange(value) {
      this.selectedDate = value;
      console.log('选中日期：', this.selectedDate);
    },

    // 其他事件处理
    handleBack() {
      console.log('返回上一页');
    },

    handleDetail(task) {
      console.log('查看详情:', task);
    }
  }
}
</script>

<style scoped lang="scss">
/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.repair-task-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

// 上方蓝色区域（占1/3屏幕）
.top-section {
  background-color: #2563eb;
  height: calc(100vh / 3);
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

// 头部样式
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10rpx;

  .back-icon {
    width: 40rpx;
    height: 40rpx;
  }

  .title {
    font-size: 36rpx;
    color: #ffffff;
    font-weight: 600;
  }

  .header-icons {
    display: flex;
    gap: 30rpx;

    .more-icon, .scan-icon {
      width: 40rpx;
      height: 40rpx;
    }
  }
}

// 搜索区域样式
.search-area {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 16rpx 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .search-input {
    flex: 1;
    font-size: 28rpx;
    color: #6b7280;
    padding: 8rpx 0;
    border: none;
    outline: none;
    &::placeholder {
      color: #d1d5db;
    }
  }

  .search-icon {
    width: 36rpx;
    height: 36rpx;
    margin-left: auto; // 使搜索图标居右
  }
}

// 筛选区域样式
.filter-area {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  padding: 10rpx 0;

  .total-text {
    font-size: 28rpx;
    color: #ffffff;
    margin-top: 4rpx; // 与其他筛选项对齐
  }

  .filter-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .filter-label {
      font-size: 28rpx;
      color: #ffffff;
      margin-bottom: 6rpx;
    }

    .filter-picker {
      display: flex;
      align-items: center;

      .filter-picker-text {
        font-size: 28rpx;
        background-color: #ffffff;
        color: #2563eb;
        border-radius: 16rpx;
        padding: 6rpx 16rpx;
        box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
        min-width: 120rpx;
        text-align: center;
      }
    }
  }

  .date-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .date-label-container {
      display: flex;
      align-items: center;
      margin-bottom: 6rpx;
    }

    .time-icon {
      width: 36rpx;
      height: 36rpx;
      margin-right: 8rpx; // 图片与文字间距
    }

    .filter-label {
      font-size: 28rpx;
      color: #ffffff;
    }
  }
}

// 任务列表样式（下方白色区域）
.task-list {
  flex: 1;
  background-color: #f5f5f5;
  padding: 24rpx;
  overflow-y: auto;

  .task-item {
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 24rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

    .task-top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;

      .task-sn {
        font-size: 30rpx;
        color: #1f2937;
        font-weight: 500;
      }

      .task-status {
        font-size: 28rpx;
        padding: 4rpx 16rpx;
        border-radius: 16rpx;
        font-weight: 500;
      }

      .status-processing {
        color: #165dff;
        background-color: #eff6ff;
      }

      .status-completed {
        color: #00b42a;
        background-color: #f0fdf4;
      }
    }

    .task-info {
      display: flex;
      flex-direction: column;
      gap: 16rpx;

      .task-way, .task-time {
        font-size: 28rpx;
        color: #6b7280;
      }

      .detail-btn {
        align-self: flex-end;
        background-color: #2563eb;
        color: #ffffff;
        font-size: 28rpx;
        border-radius: 12rpx;
        padding: 10rpx 24rpx;
        margin-top: 16rpx;
        box-shadow: 0 2rpx 8rpx rgba(37, 99, 235, 0.3);
        border: none;
      }
    }
  }

  .empty-state {
    text-align: center;
    padding: 100rpx 0;
    color: #9ca3af;
    font-size: 28rpx;
  }
}

// 兼容性处理
::v-deep {
  // 确保picker组件可见
  .uni-picker {
    height: auto !important;
    visibility: visible !important;
  }
  
  // 确保滚动容器正常工作
  .uni-scroll-view {
    overflow: auto !important;
  }
  // 调整日期选择器样式，使其与整体风格匹配
  .uni-datetime-picker {
    .uni-input {
      background-color: #ffffff;
      color: #2563eb;
      border-radius: 16rpx;
      padding: 6rpx 16rpx;
      box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
      min-width: 120rpx;
      text-align: center;
      font-size: 28rpx;
    }
  }
}
</style>